<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('人力资源成本分析')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

</style>
<body>
<div class="wrapper wrapper-content   ibox-content" id="dv">
    <form class="form-horizontal m" id="form-humanResources-edit" AUTOCOMPLETE="OFF">
        <input th:value="${data.id}" id="id" name="id" class="form-control" type="hidden"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <div class="col-sm-12">

                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">单位：</label>
                    <div class="col-sm-8">
                        <select name="compId" id="compId" class="form-control noselect2" disabled>
                            <option value="">请选择</option>
                            <option th:each="pro:${userComp}"
                                    th:selected="${data.compId==pro.compId}"
                                    th:value="${pro.compId}"
                                    th:text="${pro.compName}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">年份：</label>
                    <div class="col-sm-8">
                        <input th:value="${data.years}" id="years" name="years" class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月份：</label>
                    <div class="col-sm-8">
                        <input th:value="${data.months}" id="months" name="months" class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">工资支出(含社保、公积金)</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">总额(工资) ：</label>
                    <div class="col-sm-8">
                        <input id="totalWages" th:value="${data.totalWages}" onblur="getRjgz()" name="totalWages"
                               class="form-control"
                               type="number"
                               placeholder="请输入总额(工资)" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月末人数：</label>
                    <div class="col-sm-8">
                        <input th:value="${data.monthEndNum}" id="monthEndNum" name="monthEndNum" class="form-control"
                               type="text"
                               disabled/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人均 ：</label>
                    <div class="col-sm-8">
                        <input id="averageWages" th:value="${data.averageWages}" name="averageWages"
                               class="form-control"
                               type="number"
                               placeholder="人均工资" required disabled/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">与上月比增加：</label>
                    <div class="col-sm-8">
                        <input id="lastMonthComparison" th:value="${data.lastMonthComparison}"
                               name="lastMonthComparison" class="form-control"
                               type="number"
                               placeholder="与上月比增加" required/>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">招聘支出</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">总额：</label>
                    <div class="col-sm-8">
                        <input id="totalRecruit" th:value="${data.totalRecruit}" onblur="getZprj()" name="totalRecruit"
                               class="form-control"
                               type="number"
                               placeholder="招聘总额" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">到岗人数：</label>
                    <div class="col-sm-8">
                        <input id="positionNum" th:value="${data.positionNum}" onblur="getZprj()" name="positionNum"
                               class="form-control"
                               type="number"
                               placeholder="到岗人数" required/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人均：</label>
                    <div class="col-sm-8">
                        <input id="averageRecruit" th:value="${data.averageRecruit}" name="averageRecruit"
                               class="form-control"
                               type="number"
                               placeholder="人均" required disabled/>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">培训支出</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">总额：</label>
                    <div class="col-sm-8">
                        <input id="totalTrain" th:value="${data.totalTrain}" onblur="getPxrj()" name="totalTrain"
                               class="form-control"
                               type="number"
                               placeholder="培训总额" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人数：</label>
                    <div class="col-sm-8">
                        <input id="trainNum" th:value="${data.trainNum}" onblur="getPxrj()" name="trainNum"
                               class="form-control"
                               type="number"
                               placeholder="培训人数" required/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人均：</label>
                    <div class="col-sm-8">
                        <input id="averageTrain" th:value="${data.averageTrain}" name="averageTrain"
                               class="form-control"
                               type="number"
                               placeholder="人均" required disabled/>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">其它活动或人资项目支出</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">总额：</label>
                    <div class="col-sm-8">
                        <input id="totalOther" th:value="${data.totalOther}" onblur="getQtrj()" name="totalOther"
                               class="form-control"
                               type="number"
                               placeholder="总额" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人数：</label>
                    <div class="col-sm-8">
                        <input id="otherNum" th:value="${data.otherNum}" onblur="getQtrj()" name="otherNum"
                               class="form-control"
                               type="number"
                               placeholder="人数" required/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人均：</label>
                    <div class="col-sm-8">
                        <input id="averageOther" th:value="${data.averageOther}" name="averageOther"
                               class="form-control"
                               type="number"
                               placeholder="人均" required disabled/>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">人力资源总成本支出</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">总额：</label>
                    <div class="col-sm-8">
                        <input id="totalHuman" th:value="${data.totalHuman}" name="totalHuman" class="form-control"
                               type="number"
                               placeholder="总额" required/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">平均人数：</label>
                    <div class="col-sm-8">
                        <input id="humanNum" th:value="${data.humanNum}" name="humanNum" class="form-control"
                               type="number"
                               placeholder="平均人数" required/>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">人均成本：</label>
                    <div class="col-sm-8">
                        <input id="averageHuman" th:value="${data.averageHuman}" name="averageHuman"
                               class="form-control"
                               type="number"
                               placeholder="人均成本" required disabled/>
                    </div>
                </div>
            </div>
        </div>


    </form>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>
<script type="text/javascript">
    var prefix = ctx + 'humanResources';
    var sum;
    var avg;
    var monthEndNum;
    var monthsCumulative;
    $(function () {
        $.ajax({
            url: prefix + '/costTotal',
            data: {
                compId: $("#compId").val(),
                years: $("#years").val(),
                months: $("#months").val()

            },
            async: false,
            success: function (data) {
                monthEndNum = Number($("#monthEndNum").val()) + data.data.totalMonthNum;
                //sum=Number($("#totalWages").val())+Number($("#totalRecruit").val())+Number($("#totalTrain").val())+Number($("#totalOther").val())+data.data.totalExpenditure;
                //$("#totalHuman").val(sum);
                monthsCumulative = data.data.monthsCumulative + 1;
                // $("#totalWages,#totalRecruit,#totalTrain,#totalOther").change(function () {
                //     //sum=Number($("#totalWages").val())+Number($("#totalRecruit").val())+Number($("#totalTrain").val())+Number($("#totalOther").val())+data.data.totalExpenditure;
                //     //$("#totalHuman").val(sum);
                //     //$("#averageHuman").val((Number($("#totalHuman").val())/Number($("#humanNum").val())).toFixed(2));
                // })
            }
        })
        //avg=parseInt(monthEndNum/monthsCumulative);
        //$("#humanNum").val(avg);

        $("#totalHuman,#humanNum").change(function () {
            if (Number($("#humanNum").val()) == 0) {
                $("#averageHuman").val(0);
            }else {
                $("#averageHuman").val((Number($("#totalHuman").val()) / Number($("#humanNum").val())).toFixed(2));
            }

        })
    })


    function submitHandler() {
        if ($.validate.form()) {
            $("input").removeAttr('disabled');
            $("select").removeAttr('disabled');
            var data = $("#form-humanResources-edit").serializeArray();
            $.operate.save(prefix + "/edit", data);
            //parent.sum();
        }
    }

    function getRjgz() {
        var totalWages = Number($("#totalWages").val());
        var monthEndNum = Number($("#monthEndNum").val());
        if (totalWages != '' && monthEndNum != '') {
            var averageWages = (totalWages / monthEndNum).toFixed(2);
            $("#averageWages").val(averageWages);
        }
    }

    function getZprj() {
        var totalRecruit = Number($("#totalRecruit").val());
        var positionNum = Number($("#positionNum").val());

        if (totalRecruit != '' && positionNum != '') {
            var averageRecruit = (totalRecruit / positionNum).toFixed(2);
            $("#averageRecruit").val(averageRecruit);
        } else if (positionNum == 0) {
            $("#averageRecruit").val(0);
        }
    }

    function getPxrj() {
        var totalTrain = Number($("#totalTrain").val());
        var trainNum = Number($("#trainNum").val());
        if (totalTrain != '' && trainNum != '') {
            var averageTrain = (totalTrain / trainNum).toFixed(2);
            $("#averageTrain").val(averageTrain);
        } else if (trainNum == 0) {
            $("#averageTrain").val(0);
        }
    }

    function getQtrj() {
        var totalOther = Number($("#totalOther").val());
        var otherNum = Number($("#otherNum").val());
        if (totalOther != '' && otherNum != '') {
            var averageOther = (totalOther / otherNum).toFixed(2);
            $("#averageOther").val(averageOther);
        } else if (otherNum == 0) {
            $("#averageOther").val(0);
        }
    }

    function getRlzyrj() {
        var totalHuman = $("#totalHuman").val();
        var humanNum = $("#humanNum").val();
        if (totalHuman != '' && humanNum != '') {
            var averageHuman = (totalHuman / humanNum).toFixed(2);
            $("#averageHuman").val(averageHuman);
        }
    }

</script>
</body>
</html>